﻿<%--
  Created by IntelliJ IDEA.
  User: chenr
  Date: 7/16/2019
  Time: 3:18 PM
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html  xmlns:th="http://www.thymeleaf.org">
<head>
	<title>航班信息</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta name="description" content="">
	<meta name="author" content="Dashboard">
	<meta name="keyword" content="Dashboard, Bootstrap, Admin, Template, Theme, Responsive, Fluid, Retina">
	<script type="text/javascript" src="/static/js/loader.js"></script>

</head>
<!-- 简化版的页面，可作为初步整合案例 -->
<body>
<div id="wrapper">
	<    <!--头部：页面标题栏-->
    <jsp:include page="../part/manager.header.jsp"></jsp:include>
    <!--导航栏：页面菜单栏-->
    <jsp:include page="../part/manager.menu.jsp"></jsp:include>
	<div id="page-wrapper">
		<div id="page-inner">
			<div class="row">
				<div class="col-md-12">
					<div class="panel panel-default">
						<div class="panel-heading">
							<h3>航班信息管理</h3>
						</div>
						<div class="panel-body">
							<form id="formSearch" class="form-horizontal">
								<div class="form-group" style="margin:15px">
									<label class="control-label col-sm-2" for="flightname">航班号:</label>
									<div class="col-sm-2">
										<input type="text" class="form-control" id="flightname"/>
									</div>
									<label class="control-label col-sm-2" for="flighttype">进出港状态:</label>
									<div class="col-sm-2">
										<select class="form-control" id="flighttype">
											<option value="">全部</option> <!-- 此处value="",后台才能拿到空串 -->
											<option>出港</option>
											<option>进港</option>
										</select>
									</div>
									<div class="col-sm-4" style="text-align:center;">
										<button type="button" id="btn_query" class="btn btn-primary">
											<span class="glyphicon glyphicon-search" aria-hidden="true"></span> 查 询
										</button>
									</div>
								</div>
							</form>
							<div id="toolbar" class="btn-group">
								<button id="btn_add" type="button" class="btn btn-default">
									<span class="glyphicon glyphicon-plus" aria-hidden="true"></span> 新增
								</button>
								<button id="btn_edit" type="button" class="btn btn-default">
									<span class="glyphicon glyphicon-pencil" aria-hidden="true"></span> 修改
								</button>
								<button id="btn_delete" type="button" class="btn btn-default">
									<span class="glyphicon glyphicon-remove" aria-hidden="true"></span> 删除
								</button>
							</div>
							<!-- @@@@@@@@@@@@     表格数据     @@@@@@@@@@@@@ -->
							<table id="tb_flight" class="table table-striped table-bordered table-hover"></table>
							<!-- @@@@@@@@@@@@     表格数据     @@@@@@@@@@@@@ -->
						</div>
					</div>
					<!-- 模态框（Modal） myModal-->
					<div class="modal fade" id="myModal" tabindex="-1" role="dialog"
						 aria-labelledby="myModalLabel" aria-hidden="true">
						<div class="modal-dialog">
							<div class="modal-content">
								<div class="modal-header">
									<button type="button" class="close" data-dismiss="modal"
											aria-hidden="true">×</button>
									<!-- 表单嵌套表格：规范表单格式 -->
									<form role="form" id="editForm">
										<div class="form-group">
											<table class="table" style="font: '黑体';">
												<thead>
												<tr>
													<th>航班信息：<input hidden="hidden" id="flightinfo" name="flightinfo"></th>
													<th></th>
												</tr>
												</thead>
												<tbody>
												<tr hidden="hidden">
													<td><input type="text" id="rid" name="rid" class="form-control"/></td>
												</tr>
                                                <tr>
                                                    <td><b>航班号:</b></td>
                                                    <td><input type="text" id="pid" name="pid" class="form-control"/></td>
                                                </tr>
												<tr>
													<td><b>出发地:</b></td>
													<td><input type="text" id="start" name="start" class="form-control"/></td>
												</tr>
												<tr>
													<td><b>到达地:</b></td>
													<td><input type="text" id="end" name="end" class="form-control"/></td>
												</tr>
												<tr>
													<td><b>机型:</b></td>
													<td><input type="text" id="model" name="model" class="form-control"/></td>
												</tr>
												<tr>
													<td><b>计划起飞时间（STD)：</b></td>
													<td><input type="date" id="std" name="std" class="form-control"/></td>
												</tr>
												<tr>
													<td><b>计划到达时间（STA）</b></td>
													<td><input type="date" id="sta" name="sta" class="form-control"/></td>
												</tr>
												<tr>
													<td><b>实际起飞时间（ATD）</b></td>
													<td><input type="date" id="atd" name="atd" class="form-control"/></td>
												</tr>
												<tr>
													<td><b>实际到达时间</b></td>
													<td><input type="date" id="ata" name="ata" class="form-control"/></td>
												</tr>
												<tr>
													<td><b>进出港类型：</b></td>
													<td>
														<select id="type" name="type" class="form-control">
															<option>出港</option>
															<option>进港</option>
														</select>
													</td>
												</tr>
												</tbody>
											</table>
											<div class="modal-footer">
												<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
												<input value="提交" class="btn btn-primary" id="btn_submit">
											</div>
										</div>
									</form>
								</div>
							</div>
						</div>
						<!-- /.modal-dialog -->
					</div>
					<!-- /.modal -->
				</div>
			</div>
		</div>
	</div>
</div>
<script type="text/javascript">

    $(function() {
        //1.初始化Table
        var oTable = new TableInit();
        oTable.Init();

        //2.初始化Button的点击事件
        var oButtonInit = new ButtonInit();
        oButtonInit.Init();

    });
    var TableInit = function() {
        var oTableInit = new Object();
        //初始化Table
        oTableInit.Init = function() {
            $("#tb_flight").bootstrapTable({
                url : "restflight", //请求后台的URL（*）
                method : "get", //请求方式（*）
                toolbar : "#toolbar", //工具按钮用哪个容器
                queryParamsType : "page", //采用restful风格发送数据
                queryParams : oTableInit.queryParams,//传递参数（*）
                pagination: true, //是否显示分页（*）
                sidePagination: "server",           //分页方式：client客户端分页，server服务端分页（*）
                pageSize: 5,                       //每页的记录行数（*）
                pageList: [5,10,25,50,100],
                sortable: true,
                sortName: "std",
                sortOrder: "asc",
                silentSort: true,  // 换页的时候自动记住排序
                showColumns: true,
                showRefresh: true,
                minimumCountColumns: 2,
                clickToSelect: true,    //点击选中功能
                showToggle: true,
                columns : [ {
                    checkbox : true
                },
                //     {
                //     field : "rid",
                //     title : "id号",
                //     align: "center",
                //     valign: "middle",
                //     visible : true,
                //     sortable: true // 开启排序功能
                // },
                    {
                    field : "pid",
                    title : "航班号",
                    align: "center",
                    valign: "middle",
                    sortable: true // 开启排序功能
                }, {
                    field : "start",
                    title : "出发地",
                    align: "center",
                    valign: "middle",
                    sortable: true // 开启排序功能
                }, {
                    field : "end",
                    title : "到达地",
                    align: "center",
                    valign: "middle",
                    sortable: true // 开启排序功能
                }, {
                    field : "std",
                    title : "计划起飞时间（STD）",
                    align: "center",
                    valign: "middle",
                    sortable: true // 开启排序功能
                }, {
                    field : "sta",
                    title : "计划到达时间（STA）",
                    align: "center",
                    valign: "middle",
                    sortable: true // 开启排序功能
                }, {
                    field : "atd",
                    title : "实际起飞时间（ATD）",
                    align: "center",
                    valign: "middle",
                    sortable: true // 开启排序功能
                }, {
                    field : "ata",
                    title : "实际到达时间（ATA）",
                    align: "center",
                    valign: "middle",
                    sortable: true // 开启排序功能
                }, {
                    field : "type",
                    title : "进出港类型",
                    align: "center",
                    valign: "middle",
                    sortable: true // 开启排序功能
                }],
                // 改造JsonResult后就不需要配置这个属性了
                responseHandler: function(res) {  //表格数据设置
                    console.log(res);
                    console.log(res.pagedatas.total);
                    console.log(res.pagedatas.list);
                    return {
                        "total": res.pagedatas.total,//总记录数
                        "rows": res.pagedatas.list   //数据
                    };
                }
            });
        };


        //得到查询的参数
        oTableInit.queryParams = function(params) {
            //console.log(params);
            var temp = { //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的
                pageSize: params.pageSize,   //页面大小
                pageNum: params.pageNumber,  //页码
                //search: params.search,  //搜索框
                sort: params.sortName,    //排序字段
                order: params.sortOrder,  //排序方式
                pid : $("#flightname").val(),
                type : $("#flighttype").val()
            };
            return temp;
        };

        return oTableInit;
    };


    var ButtonInit = function() {
        var oInit = new Object();

        oInit.Init = function() {

            $("#btn_add").click(function(){
                $("#myModal").find(".form-control").val(""); // 清空模态框里头的数据
                $("#myModal").modal();
            });

            $("#btn_edit").click(function(){
                var arrselections = commonCheck(true);
                if(arrselections==null)return;
                $("#editForm").setForm(arrselections[0]);
                $("#myModal").modal();
            });


            $("#btn_delete").click(function() {
                var arrselections = commonCheck(false);
                if(arrselections==null)return;

                Tip.confirm({
                    message : "确认要删除选择的数据吗？"
                }).on(function(e) {
                    if (!e) return;
                    var cus = arrselections;
                    $.delAll("restflight", cus, function(res) {
                        commonChange(res);
                    });
                });
            });

            $("#btn_submit").click(function(){
                var param = $("#editForm").serializeJson();
                console.log(param);
                if($("#rid").val()!=""){   //不为空则做修改
                    $.edit("restflight",param,function(res){
                        commonChange(res);
                    });
                }else{
                    $.add("restflight",param,function(res){
                        commonChange(res);
                    });
                }
            })

            $("#btn_query").click(function() {
                $("#tb_flight").bootstrapTable("refresh");
            });
        };

        return oInit;
    };

    //统一取选中数据并做校验
    function commonCheck(only){
        var arrselections = $("#tb_flight").bootstrapTable("getSelections");
        console.log(arrselections[0]);
        if(only&&arrselections.length > 1){
            toastr.warning("只能选择一行进行编辑");
            return null;
        }
        if (arrselections.length <= 0) {
            toastr.warning("请选择有效数据");
            return null;
        }
        return arrselections;
    }

    //针对增删改的返回内容做统一化处理
    function commonChange(res){
        if (res.state == 0) {
            toastr.success(res.message);
            $("#myModal").modal("hide");
            $("#tb_flight").bootstrapTable("refresh");
        }else{
            toastr.error(res.message);
        }
    }

</script>
</body>
</html>

